<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span>
        <el-icon color="#3B98F7" :size="25" style="top: 5px">
          <Opportunity style="font-size: 25px" />
        </el-icon>
      </span>
      <span class="header-title"> 通知公告 </span>
      <!-- <span style="float: right; color: #a3a3a3">
        <em style="font-style: normal; color: #3b98f7; font-size: 20px">15</em>条待处理</span
      > -->
    </div>
    <div class="container">
      <el-empty v-if="notifys.length === 0" style="padding: 0" description="暂无公告" />
      <el-row v-for="item in notifys" :key="item.id" :gutter="20">
        <el-col class="container-col" :span="24" :offset="0">
          <div class="container-svg">
            <svg
              t="1699673177254"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4160"
              width="7"
              height="7"
            >
              <path d="M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z" fill="#0590DF" p-id="4161"></path>
            </svg>
          </div>

          <span class="container-title">{{ item.content }}</span>
          <span class="container-date">{{ moment(item.createTime).format("YYYY-MM-DD") }}</span>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import moment from "moment";
import { SysNotify } from "@/api/dashboard/types";
const props = defineProps({
  notifys: {
    type: Array<SysNotify>,
    default: new Array<SysNotify>(),
  },
});

const { notifys } = toRefs(props);
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}

.container {
  padding-top: 0px;
  height: 225px;
}

.container-col {
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #e2e2e2;
}

.container-svg {
  width: 10px;
  height: 40px;
  display: inline-block;
  top: -18px;
  position: relative;
}

.container-svg svg {
  vertical-align: 0.1em;
}

.container-title {
  font-size: 14px;
  color: #101010;
  width: 250px;
  display: inline-block;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.container-date {
  font-size: 14px;
  color: #cdcdcd;
  float: right;
}
</style>
